<template>
	<view>
		<view class="competition">
			<uv-drop-down ref="dropDown" text-size="28rpx" text-color="#2C2C2C" text-active-size="28rpx"
				text-active-color="#5E77F8" :extra-icon="{name: 'arrow-down', size: '30rpx', color: '#2C2C2C'}"
				:extra-active-icon="{name: 'arrow-up', size: '30rpx', color: '#5E77F8'}" sign="dropDown_1"
				:defaultValue="defaultValue" @click="selectMenu">
				<uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').value">
				</uv-drop-down-item>
				<view class="line"></view>
				<uv-drop-down-item name="state" type="2" :label="dropItem('state').label"
					:value="dropItem('state').value">
				</uv-drop-down-item>
				<view class="line"></view>
				<uv-drop-down-item name="intelligenceSearch" type="2" :label="dropItem('intelligenceSearch').label"
					:value="dropItem('intelligenceSearch').value">
				</uv-drop-down-item>
			</uv-drop-down>
			<uv-drop-down-popup sign="dropDown_1" @popupChange="change" :currentDropItem="currentDropItem"
				@clickItem="clickItem">
			</uv-drop-down-popup>
		</view>
		<scroll-view @scrolltolower="lower" :style="{height:data.clientHeight+'px'}" id="scrollT" scroll-y="true">
			<clubItem :item="item" v-for="(item,index) in data.list" :key="index"></clubItem>
			<view class="no-data">
				<uv-load-more fontSize="12" v-if="data.isComplete" status="nomore" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		ref,
		onMounted,
		getCurrentInstance,
		defineProps,
		defineExpose
	} from 'vue';
	import {
		setScrollHeight
	} from '@/utils/uitls.js';
	import clubItem from "@/compoments/discover/clubItem.vue";
	import {
		echoDiscovery
	} from '../../requestApi/api.js';
	const props=defineProps(['city']);
	const data = ref({
		clientHeight: 0, //scroll-view 可滚动高度
		defaultValue: [0, 'all', '0'],
		activeName: 'type',
		result: [],
		type: {
			label: '全部类型',
			value: 'all',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				label: '全部类型',
				value: 'all'
			}, {
				label: '赛事',
				value: 1
			}]
		},
		state: {
			label: '赛事状态',
			value: 'all',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				label: '全部',
				value: 'all'
			}, {
				label: '报名中',
				value: 1
			}, {
				label: '比赛中',
				value: 2
			}, {
				label: '已结束',
				value: 3
			}]
		},
		intelligenceSearch: {
			label: '智能搜索',
			value: 'all',
			activeIndex: 0,
			color: '#333',
			activeColor: '#2878ff',
			child: [{
				label: '全部',
				value: 'all'
			}, {
				label: '最热',
				value: 1
			}, {
				label: '最新',
				value: 2
			}]
		},
		list: [],
		form: {
			intelligenceSearch: '',
			state: '',
			type: '',
			current: 1,
			size: 10,
			address:''
		},
		isLoading: false,
		isComplete: false,
	})
	const instance = getCurrentInstance(); //获取当前实例
	onLoad(() => {

	})
	onMounted(() => {
		setScrollHeight("#scrollT", instance).then(res => {
			data.value.clientHeight = res;
		});
		data.value.form.address=props.city
		getList();
	})
	//切换城市
	const changeCity=()=>{
		data.value.list = [];
		data.value.form.current=1;
		data.value.isComplete = false;
		getList();
	};
	defineExpose({ data ,changeCity})
	//触底
	const lower = () => {
		!info.value.isLoading && !info.value.isComplete && getList();
		// console.log('到底啦')
	}
	//获取列表
	const getList = () => {
		data.value.isLoading = true;
		echoDiscovery(data.value.form).then(res => {
			data.value.isLoading = false;
			data.value.list = data.value.list.concat(res.data.records);
			data.value.form.current++;
			data.value.isComplete = !res.data.records.length;

		})
	};

	const dropItem = computed(() => {
		return (name) => {
			const result = {};
			const find = data.value.result.find(item => item.name === name);
			if (find) {
				result.label = find.label;
				result.value = find.value;
			} else {
				result.label = data.value[name].label;
				result.value = data.value[name].value;
			}
			return result;
		}


	})
	const currentDropItem = computed(() => {
		return data.value[data.value.activeName];
	})



	/**
	 * 点击每个筛选项回调
	 * @param {Object} e { name, active, type } = e
	 */
	function selectMenu(e) {
		const {
			name,
			active,
			type
		} = e;
		data.value.activeName = name;
		const find = data.value.result.find(item => item.name == data.value.activeName);
		if (find) {
			const findIndex = data.value[data.value.activeName].child.findIndex(item => item.label == find.label && item
				.value == find.value);
			data.value[data.value.activeName].activeIndex = findIndex;
		} else {
			data.value[data.value.activeName].activeIndex = 0;
		}

	}
	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	function clickItem(e) {
		// 下面有重新赋值，所以用let
		let {
			label,
			value
		} = e;
		const findIndex = data.value.result.findIndex(item => item.name == data.value.activeName);
		// console.log('findIndex',data.value.defaultValue)
		if (data.value.defaultValue.indexOf(value) > -1 && data.value[data.value.activeName].label) {
			label = data.value[data.value.activeName].label;
		}
		// 已经存在筛选项
		if (findIndex > -1) {
			data.value.result[findIndex] = {
				name: data.value.activeName,
				label,
				value
			}
			// data.value.$set(data.value.result, findIndex, {
			// 	name: data.value.activeName,
			// 	label,
			// 	value
			// })
		} else {
			data.value.result.push({
				name: data.value.activeName,
				label,
				value
			});
		}

		data.value.result.filter(item => {
			let index = data.value.defaultValue.indexOf(item.value);
			// console.log(item.name, item.value)
			if (index == -1) { //选择
				data.value.form[item.name] = item.value;
			} else {
				//全部
				data.value.form[item.name] = '';
			}

		})

		getList();
		// data.value.result = data.value.result.filter(item =>data.value.defaultValue.indexOf(item.value) == -1);
		// uni.showModal({
		// 	content: `筛选的值：${JSON.stringify(data.value.result)}`
		// })


		// console.log(data.value.result)
	}

	function change(e) {
		// console.log('弹窗打开状态：', e);
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: 'shared'
		}
	}
</script>
<style lang="scss" scoped>
	.competition {
		margin-bottom: 20rpx;
	}

	.line {
		width: 2rpx;
		height: 20rpx;
		background-color: #A5A5A5;

	}

	::v-deep .uv-drop-down {
		border-bottom: none;
		align-items: center;
	}

	::v-deep .uv-drop-down-item {
		padding: 26rpx 0;
		flex: 1;
		justify-content: center;
	}

	::v-deep .uv-text {
		flex: none;
		width: auto;
	}
</style>